<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
	<link rel="stylesheet" href="./css/home.css">
	<link rel="stylesheet" href="./css/videos.css">
	<link rel="stylesheet" href="./css/swiper.min.css">
	
</head>

<body>
	<div class="index">
		<div class="header">
			<img src="./static/home/1699846871093.jpg" mode=""></img>
			<span>经验</span>
			<span>同城</span>
			<span class="xuanZho"><a href="./videos.html">长视频</a></span>
			<span>团购</span>
			<span>关注</span>
			<span class="right">></span>
			<navigator url="/pages/search/index">
				<img src="./static/home/1699846896869(1).jpg" mode=""></img>
			</navigator>
		</div>

		<div class="main he_box">
			<div class="box1">
				<div class="img">
					<div class="swiper-container">
						<div class="swiper-wrapper">

							<div class="swiper-slide">
								<img src="./static/vied/1700028524013.jpg"></img>
							</div>
							<div class="swiper-slide">
								<img src="./static/vied/1700028524013.jpg"></img>
							</div>

						</div>
						<div class="swiper-pagination"></div>

					</div>
					<!-- <img src="./static/vied/1700028524013.jpg"></img> -->

				</div>
				<div class="span">
					刘筱享一人团灭七队:二哥的破包袱有多破，......
				</div>
				<div class="user">
					<div><img src="./static/home/1699846917025.jpg"></img>南烟侃娱乐</div>
					<div><img src="./static/home/1699849074433.jpg"></img>5954</div>
				</div>
			</div>
		</div>
		<div>
			<button onclick="fn()">美食</button>
			<button onclick="fn1()">音乐</button>
		</div>
		<div class="main" style="margin-top: 20px;">
			<div style="display: flex;" id="myElement">
				<div class="box1 box6"  style="height: 520px;">
					<div class="img">
						<img src="./static/vied/1700028862390.jpg" mode=""></img>

					</div>
					<div class="span">
						您早上叫我名字的声音还在耳边久久回荡，···

					</div>
					<div class="user">
						<div><img src="./static/home/1699846917025.jpg"></img>@梦伟</div>
						<div><img src="./static/home/1699849074433.jpg"></img>7.0万</div>
					</div>
				</div>

				<div class="box1 box6" style="height: 520px;">
					<div class="img">
						<img src="./static/vied/1700028862390.jpg" mode=""></img>

					</div>
					<div class="span">
						网友推荐，几十块钱又解锁8个新品种，做了·.·
					</div>
					<div class="user">
						<div><img src="./static/home/1699846917025.jpg"></img>融三胖</div>
						<div><img src="./static/home/1699849074433.jpg"></img>5534</div>
					</div>
				</div>
			</div>

			<div style="display: flex;" id="myElement1">
				<div class="box1 box5">
					<div class="img">
						<img src="./static/vied/1700028840329.jpg" mode=""></img>

					</div>
					<div class="span">
						您早上叫我名字的声音还在耳边久久回荡，···

					</div>
					<div class="user">
						<div><img src="./static/home/1699846917025.jpg"></img>@梦伟</div>
						<div><img src="./static/home/1699849074433.jpg"></img>7.0万</div>
					</div>
				</div>

				<div class="box1 box5">
					<div class="img">
						<img src="./static/vied/1700028862390.jpg" mode=""></img>

					</div>
					<div class="span">
						网友推荐，几十块钱又解锁8个新品种，做了·.·
					</div>
					<div class="user">
						<div><img src="./static/home/1699846917025.jpg"></img>融三胖</div>
						<div><img src="./static/home/1699849074433.jpg"></img>5534</div>
					</div>
				</div>
			</div>
			<div class="box3"></div>

		</div>

		<div class="footer">
			<div>
				<a href="./home.html">首页</a>
			</div>
			<div>
				<a href="./procedure.html">朋友</a>
			</div>
			<div>
				<img src="./static/proced/1699865786832.jpg" alt="">
			</div>
			<div>
				<a href="./message.html">消息</a>
			</div>
			<div>
				<a href="./user.html">我的</a>
			</div>
		</div>
	</div>

	<button id="test" style="position:fixed;right:20px;bottom:130px">回到顶部</button>
</body>

</html>

<script src="./js/swiper.min.js"></script>
<script>
	var mySwiper2 = new Swiper('.swiper-container', {
		initialSlide: 2,
		autoplay: true,//自动滑动
		speed: 500,//自动滑动开始到结束的时间（单位ms）
		loop: true,//开启循环
		// loopedSlides:3,//在loop模式下使用slidesPerview:'auto',还需使用该参数设置所要用到的loop个数。
		// slidesPerView:2,//设置slider容器能够同时显示的slides数量(carousel模式)。另外，支持'auto'值，会根据容器container的宽度调整slides数目。
		// effect:'coverflow',//可以实现3D效果的轮播,
		pagination: '.swiper-pagination',//分页器
		centeredSlides: true,//设定为true时，active slide会居中，而不是默认状态下的居左。
		navigation: {
			nextEl: '.swiper-button-next',
			prevEl: '.swiper-button-prev',
		},
		//     coverflow:{
		//           rotate:0,//slide做3d旋转时Y轴的旋转角度。默认50。
		//           stretch:100,//每个slide之间的拉伸值，越大slide靠得越紧。 默认0。
		//           depth:150,//slide的位置深度。值越大z轴距离越远，看起来越小。 默认100。
		//           modifier:1,//depth和rotate和stretch的倍率，相当于depth*modifier、rotate*modifier、stretch*modifier，值越大这三个参数的效果越明显。默认1。
		//           slideShadows:false,//开启slide阴影。默认 true。
		//   },
	});

	test.onclick = function () {
		document.body.scrollTop = document.documentElement.scrollTop = 0;
	}
	function fn() {
		document.getElementsByClassName("box6")[0].style.display = "none";
		document.getElementsByClassName("box6")[1].style.display = "none";
		document.getElementsByClassName("box5")[0].style.display = "block";
		document.getElementsByClassName("box5")[1].style.display = "block";
	}

	function fn1() {
		document.getElementsByClassName("box5")[0].style.display = "none";
		document.getElementsByClassName("box5")[1].style.display = "none";
		document.getElementsByClassName("box6")[0].style.display = "block";
		document.getElementsByClassName("box6")[1].style.display = "block";
	}



	var elem = document.getElementById("myElement");   
	var pos = 0;  
	var id = setInterval(frame, 10);  
	function frame() {  
	if (pos == 350) {  
		clearInterval(id);  
	} else {  
		pos++;   
		elem.style.left = pos + 'px';   
	}  
	}
	function frame1() {  
	if (pos == 350) {  
		clearInterval(id);  
	} else {  
		pos++;   
		elem.style.right = pos + 'px';   
	}  
	}
	var elem1 = document.getElementById("myElement1");   
	var pos1 = 0;  
	var id1 = setInterval(frame1, 10);  
	function frame1() {  
	if (pos1 == 350) {  
		clearInterval(id1);  
	} else {  
		pos1++;   
		elem1.style.right = pos + 'px';   
	}  
	}
</script>